<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>WebTools-Web开发者素材</title>
    <meta name="keywords" content="vue,react,组件，插件,模板，echarts,数据可视化,微前端,后台管理系统,免费下载">
    <meta name="description" content="提供vue/react/组件,插件,echarts数据可视化、后台管理系统模板免费下载,微前端解决方案">
    <link rel="icon" href="../../img/logo.png">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="css.css">
    <!--聚合地图-->
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
</head>
<body>
<div class="container">
    <div class="systemName">
        重点营运车辆运行监控与安全预警系统
    </div>
    <div class="layout">
        <!--左侧-->
        <div class="layoutLeft">
            <div class="top">
                <div class="inner">
                    <li class="name">今日各类事件百分比</li>
                    <i class="topL"></i>
                    <i class="topR"></i>
                    <i class="bottomL"></i>
                    <i class="bottomR"></i>
                    <div class="numWrap">
                        <ul class="num clearfix">
                            <li class="num-title">在线车辆</li>
                            <li class="dataNum" id="dataNums1" ></li>
                        </ul>
                        <ul class="num clearfix">
                            <li class="num-title">危险品运输</li>
                            <li class="dataNum" id="dataNums2" ></li>
                        </ul>
                        <ul class="num clearfix">
                            <li class="num-title">班线客车</li>
                            <div class="dataNum" id="dataNums3" ></div>
                        </ul>
                        <ul class="num clearfix">
                            <li class="num-title">旅游包车</li>
                            <li class="dataNum" id="dataNums5" ></li>
                        </ul>
                        <ul class="num clearfix">
                            <li class="num-title">外省车辆</li>
                            <li class="dataNum" id="dataNums6" ></li>
                        </ul>

                    </div>





                </div>
            </div>
            <div class="bottom">
                <div class="inner">
                    <li class="name"> 重点路段在线统计</li>
                    <i class="topL"></i>
                    <i class="topR"></i>
                    <i class="bottomL"></i>
                    <i class="bottomR"></i>
                    <div class="echarts" id="test1"></div>
                </div>
            </div>
        </div>
        <!--左侧-->

        <!--右侧-->
        <div class="layoutRight">
            <div class="top">
                <div class="inner">
                    <li class="name">5分钟内预警信息</li>
                    <i class="topL"></i>
                    <i class="topR"></i>
                    <i class="bottomL"></i>
                    <i class="bottomR"></i>
                    <div class="events" id="events">
                        <ul>
                            <li class="item">
                                <div class="road">
                                    <span class="eventType1">超速报警</span>
                                    <span class="line">线路：<i class="lineName">S60</i></span>
                                    <span class="position">小王山隧道</span>
                                </div>
                            </li>
                            <li class="item">
                                <div class="tunnel">
                                    <div>
                                        <span class="eventType2">隧道滞留</span>
                                        <span class="carId">京A12345</span>
                                        <span class="line">线路：<i class="lineName">S60</i></span>
                                        <span class="mileage">桩号：<i class="mileageAmount">K100</i></span>
                                    </div>
                                    <div>
                                        <span class="carType">危：<i class="carAmount">51辆</i></span>
                                        <span class="carType">客：<i class="carAmount">67辆</i></span>
                                    </div>
                                </div>
                            </li>
                            <li class="item">
                                <div class="road">
                                    <span class="eventType3">疲劳驾驶</span>
                                    <span class="carId">京A12345</span>
                                    <span class="line">线路：<i class="lineName">S60</i></span>
                                    <span class="mileage">桩号：<i class="mileageAmount">K10</i></span>
                                </div>
                            </li>
                            <li class="item">
                                <div class="road">
                                    <span class="eventType4">违规停车</span>
                                    <span class="carId">京A12345</span>
                                    <span class="line">线路：<i class="lineName">S60</i></span>
                                    <span class="mileage">桩号：<i class="mileageAmount">K100</i></span>
                                </div>
                            </li>
                            <li class="item">
                                <div class="road">
                                    <span class="eventType5">凌晨行驶</span>
                                    <span class="carId">京A12345</span>
                                    <span class="line">线路：<i class="lineName">S60</i></span>
                                    <span class="mileage">桩号：<i class="mileageAmount">K100</i></span>
                                </div>
                            </li>
                            <li class="item">
                                <div class="road">
                                    <span class="eventType4">违规停车</span>
                                    <span class="carId">京A12345</span>
                                    <span class="line">线路：<i class="lineName">S60</i></span>
                                    <span class="mileage">桩号：<i class="mileageAmount">K100</i></span>
                                </div>
                            </li>
                            <li class="item">
                                <div class="tunnel">
                                    <div>
                                        <span class="eventType2">隧道滞留</span>
                                        <span class="carId">京A12345</span>
                                        <span class="line">线路：<i class="lineName">S60</i></span>
                                        <span class="mileage">桩号：<i class="mileageAmount">K100</i></span>
                                    </div>
                                    <div>
                                        <span class="carType">危：<i class="carAmount">5辆</i></span>
                                        <span class="carType">客：<i class="carAmount">15辆</i></span>
                                    </div>
                                </div>
                            </li>
                            <li class="item">
                            <div class="road">
                                <span class="eventType3">疲劳驾驶</span>
                                <span class="carId">京B88888</span>
                                <span class="line">线路：<i class="lineName">S60</i></span>
                                <span class="mileage">桩号：<i class="mileageAmount">K100</i></span>
                            </div>
                        </li>
                        </ul>

                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="inner">
                    <li class="name"> 今日各类事件百分比</li>
                    <i class="topL"></i>
                    <i class="topR"></i>
                    <i class="bottomL"></i>
                    <i class="bottomR"></i>
                    <div class="echarts" id="test3"></div>
                </div>
            </div>
        </div>
        <!--右侧-->

        <!--中间-->
        <div class="layoutCenter clearfix">
            <div class="top">
                <div class="inner">
                    <div id="container" class="map" tabindex="0"></div>
                </div>
            </div>
            <div class="bottom">
                <div class="inner">
                    <li class="name">今日进入集团高速车辆统计</li>
                    <i class="topL"></i>
                    <i class="topR"></i>
                    <i class="bottomL"></i>
                    <i class="bottomR"></i>
                    <div class="echarts" id="test2"></div>
                </div>
            </div>
        </div>
        <!--中间-->
    </div>

</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/echarts/echarts.min.js"></script>
<script src="js/main.js"></script>
<script src="js/num.js"></script>

<script src="//a.amap.com/jsapi_demos/static/china.js"></script>
<script type="text/javascript"  src="https://webapi.amap.com/maps?v=1.4.12&key=d6fbc024e6f2f26eedcaca349eb6575c&plugin=AMap.MarkerClusterer"></script>
<script>
    $(function(){
        $("#dataNums1").rollNum({
            deVal:6888
        });
        $("#dataNums2").rollNum({
            deVal:6888
        });
        $("#dataNums3").rollNum({
            deVal:6888
        });
        $("#dataNums4").rollNum({
            deVal:9998
        });
        $("#dataNums5").rollNum({
            deVal:1234
        });
        $("#dataNums6").rollNum({
            deVal:4432
        });
    });

    $(function() {
        var $this = $("#events");
        var scrollTimer;
        $this.hover(function() {
            clearInterval(scrollTimer);
        },
            function() {
            scrollTimer = setInterval(function() {
                scrollNews($this);
            }, 2000);
        }).trigger("mouseleave");

        function scrollNews(obj) {
            var $self = obj.find("ul");
            var lineHeight = $self.find("li:first").height();
            $self
                .animate({
                "marginTop": -lineHeight + "px"
            }, 600, function() {
                $self
                    .css({ marginTop: 0 })
                    .find("li:first").appendTo($self);
            })
        }
    })
</script>
<script type="text/javascript">
    var cluster, markers = [];

    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116, 28],
        mapStyle: "amap://styles/769710e25c040f17c6bee0b0cd95d9f1",
        zoom: 8
    });

    for (var i = 0; i < points.length; i += 1) {
        markers.push(new AMap.Marker({
            position: points[i]['lnglat'],
            content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
            offset: new AMap.Pixel(-15, -15)
        }))
    }

    var count = markers.length;
    var _renderClusterMarker = function (context) {
        var factor = Math.pow(context.count / count, 1 / 18);
        var div = document.createElement('div');
        var Hue = 180 - factor * 180;
        var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
        var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
        var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
        div.style.backgroundColor = bgColor;
        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
        div.style.width = div.style.height = size + 'px';
        div.style.border = 'solid 1px ' + borderColor;
        div.style.borderRadius = size / 2 + 'px';
        div.style.boxShadow = '0 0 1px ' + shadowColor;
        div.innerHTML = context.count;
        div.style.lineHeight = size + 'px';
        div.style.color = fontColor;
        div.style.fontSize = '14px';
        div.style.textAlign = 'center';
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div)
    };

    addCluster(1);

    function addCluster(tag) {
        if (cluster) {
            cluster.setMap(null);
        }
        if (tag == 2) {//完全自定义
            cluster = new AMap.MarkerClusterer(map, markers, {
                gridSize: 80,
                renderClusterMarker: _renderClusterMarker
            });
        } else if (tag == 1) {//自定义图标
            var sts = [{
                url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
                size: new AMap.Size(32, 32),
                offset: new AMap.Pixel(-16, -16)
            }, {
                url: "https://a.amap.com/jsapi_demos/static/images/green.png",
                size: new AMap.Size(32, 32),
                offset: new AMap.Pixel(-16, -16)
            }, {
                url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
                size: new AMap.Size(36, 36),
                offset: new AMap.Pixel(-18, -18)
            }, {
                url: "https://a.amap.com/jsapi_demos/static/images/red.png",
                size: new AMap.Size(48, 48),
                offset: new AMap.Pixel(-24, -24)
            }, {
                url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
                size: new AMap.Size(48, 48),
                offset: new AMap.Pixel(-24, -24)
            }];
            cluster = new AMap.MarkerClusterer(map, markers, {
                styles: sts,
                gridSize: 80
            });
        } else {//默认样式
            cluster = new AMap.MarkerClusterer(map, markers, {gridSize: 80});
        }
    }
</script>
</body>
</html>